<template>
  <div class="orders-page">
    <div class="container-custom py-8">
      <h1 class="text-3xl font-bold mb-8">我的订单</h1>
      
      <!-- 状态筛选 -->
      <div class="mb-6 flex space-x-4 border-b">
        <button
          v-for="tab in tabs"
          :key="tab.value"
          :class="[
            'px-4 py-3 font-medium border-b-2 transition-colors',
            activeTab === tab.value
              ? 'border-primary-600 text-primary-600'
              : 'border-transparent text-gray-600 hover:text-gray-900'
          ]"
          @click="activeTab = tab.value"
        >
          {{ tab.label }}
        </button>
      </div>
      
      <!-- 订单列表 -->
      <div v-if="pending" class="space-y-4">
        <div v-for="i in 3" :key="i" class="card p-6 animate-pulse">
          <div class="h-20 bg-gray-200 rounded" />
        </div>
      </div>
      
      <div v-else-if="orders.length === 0" class="text-center py-16">
        <div class="i-mdi-clipboard-text-off text-8xl text-gray-300 mb-4" />
        <p class="text-gray-600">暂无订单</p>
      </div>
      
      <div v-else class="space-y-4">
        <OrderCard
          v-for="order in orders"
          :key="order.id"
          :order="order"
          @cancel="handleCancel"
          @pay="handlePay"
        />
      </div>
      
      <!-- 分页 -->
      <div v-if="totalPages > 1" class="mt-8 flex justify-center">
        <div class="flex items-center space-x-2">
          <button
            class="btn-outline px-3 py-2"
            :disabled="currentPage === 1"
            @click="currentPage--"
          >
            上一页
          </button>
          <span class="text-sm text-gray-600">
            {{ currentPage }} / {{ totalPages }}
          </span>
          <button
            class="btn-outline px-3 py-2"
            :disabled="currentPage === totalPages"
            @click="currentPage++"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Order } from '~/types'

definePageMeta({
  middleware: 'auth',
  layout: 'default',
})

const activeTab = ref('all')
const currentPage = ref(1)

const tabs = [
  { label: '全部订单', value: 'all' },
  { label: '待支付', value: 'pending' },
  { label: '已支付', value: 'paid' },
  { label: '已取消', value: 'cancelled' },
]

// 获取订单列表
const { data: response, pending, refresh } = await useFetch('/api/orders', {
  query: computed(() => ({
    status: activeTab.value === 'all' ? undefined : activeTab.value,
    page: currentPage.value,
    pageSize: 10,
  })),
  watch: [activeTab, currentPage],
})

const orders = computed(() => response.value?.data?.items || [])
const totalPages = computed(() => response.value?.data?.pagination?.totalPages || 1)

async function handleCancel(orderId: string) {
  if (!confirm('确定要取消订单吗？')) {
    return
  }
  
  try {
    await $fetch(`/api/orders/${orderId}/cancel`, {
      method: 'POST',
    })
    
    // 刷新列表
    refresh()
  } catch (error: any) {
    alert(error.message || '取消订单失败')
  }
}

function handlePay(orderId: string) {
  navigateTo(`/payment/${orderId}`)
}

// SEO
useSeoMeta({
  title: '我的订单 - 代码小库',
  robots: 'noindex',
})
</script>

